<template>
	<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="lowerBottom">
		<swiper class="swiper" circular :autoplay="true" style="height: 460rpx;" v-show="seatList && seatList.length > 0">
			<swiper-item v-for="item in seatList" :key="item.id" @click="showDetail(item)">
				<image :src="item.image" mode="aspectFill" style="width: 100%;height: 100%;"></image>
				<view class="swiper-text uni-ellipsis-1">{{item.title}}</view>
			</swiper-item>
		</swiper>
		<uni-list>
			<uni-list-item direction="row" v-for="item in data" :key="item.id" :to="`/pages/detail?id=${item.id}`">
				<template v-slot:header>
					<view class="uni-thumb" v-if="item.image">
						<image :src="item.image" mode="aspectFill" style="width: 100%;height: 100%;"></image>
					</view>
				</template>
				<template v-slot:body>
					<view class="uni-list-box uni-content">
						<view class="title uni-ellipsis-2">
							{{item.title}}
						</view>
						<view class="date">
							{{item.createtime}}
						</view>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<uni-load-more v-if="showLoad && data.length > 0" :status="loadStatus" />
		<image src="https://zhzx.on-line-demo.com/image/zwsj.png" mode="aspectFit" class="no-data"
			v-if="loadStatus == 'no-more' && data.length == 0" style="position: static;transform: translateY(0px);"></image>
	</scroll-view>
</template>

<script>
	import request from '../common/request.js'
	export default {
		components: {

		},
		data() {
			return {
				seatList: [],
				data: [],
				page: 1,
				loadStatus: 'loading',
				showLoad: false,
			}
		},
		mounted() {
			this.getIndexSeat()
			this.getListData()
		},
		methods: {
			showDetail(data) {
				uni.navigateTo({
					url: `detail?id=${data.id}`
				});
			},
			getIndexSeat() {
				request({
					url: '/news/indexSeat',
					method: 'POST',
				}).then(res => {
					if (res.code == 1) {
						this.seatList = res.data
					}
				})
			},
			lowerBottom() {
				if (this.loadStatus != 'loading') {
					this.loadStatus = 'loading'
					this.showLoad = true
					this.page++
					this.getListData()
				}
			},
			getListData() {
				request({
					url: '/news/newsList',
					data: {
						page: this.page,
						type: 1, // 1资讯，2通知公告，3热点新闻，4会务动态
					},
					method: 'POST',
				}).then(res => {
					if (res.code == 1) {
						this.data = this.data.concat(res.data)
						if (this.page == res.lastPage) {
							this.loadStatus = 'no-more'
						} else {
							this.loadStatus = 'more'
							this.showLoad = false
						}
					} else {
						this.loadStatus = 'no-more'
					}
				})
			},
		}
	}
</script>

<style scoped>
	.swiper{
		margin: 10px 15px;
	}
	.swiper-text {
		position: absolute;
		z-index: 9;
		bottom: 0px;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		color: #fff;
		width: 100%;
		padding: 6px 20px;
		font-size: 14px;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.5);
	}

</style>